<template>
  <div>
    <a-drawer
      placement="right"
      :closable="false"
      :width="520"
      :visible="showDrawer"
      :bodyStyle="{padding: '0px'}"
      :confirmLoading="confirmLoading"
    >
      <div class="drawTitle">
        编辑学员
        <a-icon
          type="close"
          style="float:right;cursor:pointer;margin-top:5px;"
          @click="showDrawer=false"
        />
      </div>
      <div style="width:520px;height:1px;margin-bottom:64px;"></div>
      <div class="drawContent">
        <a-spin :spinning="confirmLoading">
          <a-form-model
            ref="formsDrawer"
            :model="form"
            :label-col="labelCol"
            :rules="rules"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="基本信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="学生姓名" prop="name">
              <a-input v-model="form.name" placeholder="请输入学生姓名" />
            </a-form-model-item>
            <a-form-model-item label="家长电话" prop="main_phone">
              <a-input-group compact>
                <a-select v-model="form.main_parent_type" style="width:100px;">
                  <a-select-option
                    v-for="(item,index) in relation"
                    :key="index"
                    :value="item.id"
                  >{{item.text}}</a-select-option>
                </a-select>
                <a-input style="width: 160px" v-model="form.main_phone" placeholder="请输入联系电话" />
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="性别">
              <a-radio-group v-model="form.sex">
                <a-radio :value="0">未知</a-radio>
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="出生日期">
              <a-date-picker
                v-model="form.birthday"
                :disabled-date="disabledDate"
                :allowClear="false"
              />
            </a-form-model-item>
            <a-form-model-item label="就读学校">
              <a-input placeholder v-model="form.school_name" />
            </a-form-model-item>
            <a-form-model-item label="意向课程">
              <a-select
                v-model="form.grade_id"
                placeholder="请选择意向课程"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in gradeSelect"
                  :key="index"
                  :value="item.id"
                  v-if="item.is_enable==1"
                >{{item.name}}</a-select-option>
              </a-select>
              <a @click="showChild('grades')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="联系信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="备用电话" prop="spare_phone">
              <a-input-group compact>
                <a-select v-model="form.spare_parent_type " style="width:100px;">
                  <a-select-option
                    v-for="(item,index) in relation"
                    :key="index"
                    :value="item.id"
                  >{{item.text}}</a-select-option>
                </a-select>
                <a-input style="width: 160px" v-model="form.spare_phone " placeholder="请输入联系电话" />
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="家庭住址">
              <a-input placeholder v-model="form.address" />
            </a-form-model-item>
            <a-form-model-item label="其他信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
            <a-form-model-item label="学员类型">
              <a-select
                v-model="form.type"
                placeholder="请选择"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in studentTypeSelect"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
              <!-- <a>设置</a> -->
            </a-form-model-item>
            <a-form-model-item label="跟进状态" v-if="form.type==3">
              <a-select
                v-model="form.follow_up_status"
                placeholder="请选择跟进状态"
                style="width:80%;"
                @change="$forceUpdate()"
              >
                <a-select-option :value="1">待跟进</a-select-option>
                <a-select-option :value="2">跟进中</a-select-option>
                <a-select-option :value="3">已约课</a-select-option>
                <a-select-option :value="4">已体验</a-select-option>
                <a-select-option :value="5">已失效</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="意向级别" v-if="form.type==3">
              <a-select v-model="form.intention_level" style="width:80%;" @change="$forceUpdate()">
                <a-select-option :value="1">低</a-select-option>
                <a-select-option :value="2">中</a-select-option>
                <a-select-option :value="3">高</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="学生来源">
              <a-select
                v-model="form.source_id "
                placeholder="请选择学生来源"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in sourceSelect"
                  :key="index"
                  :value="item.id"
                   v-if="item.is_enable==1"
                >{{item.name}}</a-select-option>
              </a-select>
              <a @click="showChild('source')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="跟进人">
              <a-select
                v-model="form.user_id"
                placeholder="请选择跟进人"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in userSelect"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="学管师">
              <a-select
                v-model="form.academic_supervisor"
                placeholder="请选择学管师"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in userSelect"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="标签">
              <a-select
                mode="multiple"
                v-model="form.label_ids"
                placeholder="请选择"
                style="width:200px;margin-right:10px;"
              >
                <a-select-option
                  v-for="(item,index) in tagSelect"
                  :key="index"
                  :value="item.id"
                >{{item.content}}</a-select-option>
              </a-select>
              <a @click="showChild('tags')">设置</a>
            </a-form-model-item>
            <a-form-model-item label="备注">
              <a-input
                v-model="form.remarks"
                placeholder="请输入备注(最多输入100个字符)"
                :max-length="100"
                type="textarea"
              />
            </a-form-model-item>
          </a-form-model>
        </a-spin>
      </div>
      <div class="drawButton">
        <a-button @click="showDrawer=false">取消</a-button>
        <a-button style="margin-left: 10px;" type="primary" @click="submitForm('formsDrawer')">确定</a-button>
      </div>
    </a-drawer>
    <grade-model ref="grades" @reload="reloadSelect"></grade-model>
    <sources-model ref="sources" @reload="reloadSelect"></sources-model>
    <tags-model ref="tags" @reload="reloadSelect"></tags-model>
  </div>
</template>
<script>
import { studentInfo, studentEdit } from '@/api/student'
import { gradeList } from '@/api/grade'
import { sourceList } from '@/api/sources'
import gradeModel from '@/components/gradeManage'
import sourcesModel from '@/components/studentSource'
import { accountList } from '@/api/account'
import { tagList } from '@/api/tag'
import tagsModel from '@/components/tagsManage'
import moment from 'moment'
export default {
  components: {
    gradeModel,
    sourcesModel,
    tagsModel,
  },
  name: 'editStudent',
  props: ['isQianzai'],
  data() {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      showDrawer: false,
      confirmLoading: false,
      form: {
        main_parent_type: 2,
        spare_parent_type: 3,
        type: 1,
        birthday: moment(),
        label_ids: [],
        intention_level: 2,
        follow_up_status: 1,
      },
      relation: [
        { id: 0, text: '无' },
        { id: 1, text: '本人' },
        { id: 2, text: '妈妈' },
        { id: 3, text: '爸爸' },
        { id: 4, text: '爷爷' },
        { id: 5, text: '奶奶' },
        { id: 6, text: '外公' },
        { id: 7, text: '外婆' },
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        main_phone: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }],
        spare_phone: [{ required: false, pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码！' }],
      },
      //form表单下拉框
      gradeSelect: [], //年级下拉
      sourceSelect: [], //学生来源下拉
      userSelect: [], //学管师  跟进人下拉
      tagSelect: [],
      studentTypeSelect: [
        {
          id: 1,
          name: '在读学员',
        },
        // {
        //   id: 2,
        //   name: '历史学员'
        // },
        {
          id: 3,
          name: '潜在学员',
        },
      ],
    }
  },
  methods: {
    disabledDate(current) {
      return current && current > moment().endOf('day')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          let a = JSON.stringify(this.form)
          let params = JSON.parse(a)
          params.studentid = params.id
          params.birthday = moment(params.birthday).format('YYYY-MM-DD')
          if (params.type !== 3) {
            delete params.follow_up_status
            delete params.intention_level
          }
          delete params.age
          // if(params.academic_supervisor){
          //   params.academic_supervisor=params.academic_supervisor.id
          // }
          
          console.log(params);
          // return
          studentEdit(params, params.id)
            .then((res) => {
              this.$message.success('修改成功')
              this.confirmLoading = false
              this.form = {
                main_parent_type: 2,
                birthday: moment(),
                spare_parent_type: 3,
                type: 1,
                label_ids: [],
              }
              this.showDrawer = false
              this.$emit('return', params)
            })
            .catch((err) => {
              this.confirmLoading = false
              this.$message.error(err.data.message || '修改失败')
            })
        } else {
          return false
        }
      })
    },
    showDraw(data) {
      this.showDrawer = true
      this.confirmLoading = true
      studentInfo(data)
        .then((res) => {
          this.form = JSON.parse(JSON.stringify(res))

          if (res.birthday) {
            this.form.birthday = moment(res.birthday)
          } else {
            this.form.birthday = moment()
          }
          if (res.academic_supervisor) {
            this.form.academic_supervisor = res.academic_supervisor.user_id
          }else{
            this.form.academic_supervisor=undefined
          }
          if (!res.user_id || res.user_id == 0) {
            this.form.user_id = undefined
          }
          if (!res.grade_id || res.grade_id == 0) {
            this.form.grade_id = undefined
          }
          if (!res.source_id || res.source_id == 0) {
            this.form.source_id = undefined
          }
          if (!res.type || res.type == 0) {
            this.form.type = undefined
          }
          if (!res.label_ids || res.label_ids == 0) {
            this.form.label_ids = []
          }
          if (res.type == 3) {
            this.form.intention_level = res.intention_level
            this.form.follow_up_status = res.follow_up_status
          } else {
            this.form.follow_up_status = 1
            this.form.intention_level = 2
          }
        })
        .catch((err) => {
          this.$message.error('获取学生详情失败,请重试~')
        })
        .finally(() => {
          this.reloadSelect()
          this.confirmLoading = false
        })
    },
    reloadSelect() {
      gradeList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.gradeSelect = res.data
      })
      sourceList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.sourceSelect = res.data
      })
      accountList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.userSelect = res.data
      })
      tagList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.tagSelect = res.data
      })
    },
    showChild(e) {
      if (e == 'grades') {
        this.$refs.grades.showModal()
      } else if (e == 'source') {
        this.$refs.sources.showModal()
      } else if (e == 'tags') {
        this.$refs.tags.showModal()
      }
    },
  },
}
</script>

<style lang="less" scoped>
.drawTitle {
  position: fixed;
  top: 0;
  width: 520px;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: #fff;
  z-index: 1001;
}
.drawContent {
  padding: 0 24px;
  padding-bottom: 50px;
  margin: 24px 0;
  height: 100%;
  overflow-y: auto;
}
.drawButton {
  position: fixed;
  bottom: 0;
  width: 520px;
  padding: 8px 24px;
  border-top: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  background: #fff;
  z-index: 1001;
  text-align: right;
}
</style>